<template>
  <div class="container">
    <template v-if="!getCustomerId">
      <get-user-info v-if="isGetUserInfo" @authPhoneInfo="authPhoneInfo"></get-user-info>
      <get-phone-info v-if="isGetPhoneInfo"></get-phone-info>
    </template>
    <template v-if="getCustomerId && !getPhone">
      <get-phone-info v-if="isGetPhoneInfo"></get-phone-info>
    </template>
    <div class="header">
      <div class="tabs flex flex-between">
        <div class="flex flex-center width-70" @click="setSort(0)">
          <span :class="sortIndex===0?'tab-on':'tab-off'">价格</span>
          <div class="mar-l-4">
            <img v-if="fileSpace && listQuery.sellPriceFlag===''" mode="widthFix" class="width-9 height-12"
              :src="fileSpace + '/images/goods-arrow3.png'"/>
            <img v-if="fileSpace && listQuery.sellPriceFlag===1" mode="widthFix" class="width-9 height-12"
              :src="fileSpace + '/images/goods-arrow1.png'"/>
            <img v-if="fileSpace && listQuery.sellPriceFlag===0" mode="widthFix" class="width-9 height-12"
              :src="fileSpace + '/images/goods-arrow2.png'"/>
          </div>
        </div>
       <div class="flex flex-center width-70" @click="setSort(1)">
          <span :class="sortIndex===1?'tab-on':'tab-off'">销量</span>
          <div class="mar-l-4">
            <img v-if="fileSpace && listQuery.salesNumSort===''" mode="widthFix" class="width-9 height-12"
              :src="fileSpace + '/images/goods-arrow3.png'"/>
            <img v-if="fileSpace && listQuery.salesNumSort===1" mode="widthFix" class="width-9 height-12"
              :src="fileSpace + '/images/goods-arrow1.png'"/>
            <img v-if="fileSpace && listQuery.salesNumSort===0" mode="widthFix" class="width-9 height-12"
              :src="fileSpace + '/images/goods-arrow2.png'"/>
          </div>
        </div>
        <div class="flex flex-center" @click="setSort(2)" v-if="fromType === 1">
          <div :class="sortIndex===2?'tab-on':'tab-off'" class="line-1 width-70 text-align-c">{{categoryName}}</div>
        </div>
      </div>
      <div class="mask" :class="{'mask-active': isExpend}" catchtouchmove="true" @click="isExpend = !isExpend"></div>
      <div class="category" :class="{'expend': isExpend}">
        <div class="category-list">
          <div class="list-item" :style="{backgroundColor: categoryIndex === index? globalStyle.color2 :'#fff', 
          color: categoryIndex === index  ? '#fff' : '#000', border:categoryIndex !== index? '1px solid #ccc' : ''}" 
          :class="{'item-active': categoryIndex === index}" 
          v-for="(item, index) in listCategory" :key="index" @click="categoryClick(item, index)">{{item.categoryName}}</div>
        </div>
      </div>
    </div>
    <div class="goods">
      <div class="goods-list">
        <div class="goods-wrap" v-for="(item, index) in listData" :key="index" @click="pageTo(item)">
          <div class="width-167 height-164 img-item-box pos-rel">
            <!-- 跨境图标 -->
            <div class="cross-border-pic">
              <!-- 跨境保税 -->
              <img
                v-if="fileSpace && item.crossBorderType === 2 && item.crossBorderLabelType === 1"
                :src="fileSpace + '/images/icon-cross-border.png'"
                class="icon-cross-border"
                alt="">
              <!-- 海外直邮 -->
              <img
                v-if="fileSpace && item.crossBorderType === 2 && item.crossBorderLabelType === 2"
                :src="fileSpace + '/images/icon-cross-border-22.png'"
                class="icon-cross-border"
                alt="">
            </div>
            <div v-if="item.stock === 0" class="sell-out">
              <div class="del-layer align-c">
                <div class="font-18">已售完</div>
                <div class="font-10 mar-t--2">SOLD OUT</div>
              </div>
            </div>
            <img v-if="item.mainImage" :src="item.mainImage" alt="" class="width-167 height-164">
          </div>
          <div class="goods-content pad-l-10 pad-r-10 pad-t-6">
            <div class="goods-title line-2 font-12">{{item.title}}</div>
            <div class="price-row flex flex-between mar-t-5">
              <div class="price-wrap">
                <span class="font-10 pad-t-1">￥</span>
                <span
                  class="font-14 price-short">{{ item.bestPrice }}</span>
              </div>
              <div v-if="item.stock" class="height-32">
                <div
                  @click.stop.prevent="showCart(item)"
                  :style="{color:globalStyle.color5, background:globalStyle.color2}"
                  class="in-cart-btn font-14">加入购物车</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="pad-10 mar-t-10 align-c" v-if="nodata">
        <img v-if="fileSpace" mode="widthFix" class="width-153 height-75 nodata-img"
             :src="fileSpace + '/images/2-0-kong.png'"/>
        <div class="pad-t-20 font-14 font-gray">空空如也</div>
      </div>
    </div>
    <div class="foot-cart flex flex-between">
      <div class="content flex-item">
        <div class="flex flex-center">
          <van-icon class="mar-t--4" name="shopping-cart-o" size="22px" color="#999999" />
          <div class="font-13 mar-l-6">购物车<span v-if="cartBadge !== 0">({{cartBadge}})</span></div>
        </div>
        <div class="font-12 color-price">￥<span class="font-18">{{totalPrice}}</span></div>
      </div>
      <div class="go-cart" :style="{backgroundColor: globalStyle.color2, color: globalStyle.styleType === 10 ? globalStyle.color4 : '#fff' }" @click="$pt.switchTab({url: '/pages/shop/cart/main'})">去购物车</div>
    </div>
    <!--sku选择-->
    <get-sku-buy ref="getSkuBuy" :goodsType="goodsType" :room_id="room_id" :styleColor="globalStyle"
      :goodsData="goods" :skuPropList="skuPropList" :skuList="skuList" :values="values" :featuresType ="featuresType"
      @finished="getSkuBuyFinished" @close="getSkuBuyClose"></get-sku-buy>
  </div>
</template>
<script>
import GetUserInfo from '@/components/GetUserInfo'
import GetPhoneInfo from '@/components/GetPhoneInfo'
import {
  getShopCartVeekray,
  pageUserGoodsByMemberId,
  listNextCategoryByParentId,
  getProjectGoodsSku,
  addShoppingCart } from '@/api/shop'
import { setCartBadge } from '@/utils/auth'
import GetSkuBuy from '@/components/GetSkuBuy'
export default {
  components: { GetSkuBuy, GetUserInfo, GetPhoneInfo },
  data() {
    return {
      effectiveList: [],
      feeGoodsList: [],
      groupBuyGoodsList: [],
      promotionList: [],
      listQueryCart: {
        memberId: '',
        customerId: '',
        enterpriseId: ''
      }, // 获取购物车列表信息 参数集合
      sortIndex: 0,
      categoryIndex: 0,
      isExpend: false,
      cartBadge: 0,
      // totalPrice: '0.00',
      listQuery: {
        sellPriceFlag: '',
        salesNumSort: ''
      },
      pullLoad: {
        loading: false,
        finished: false
      },
      listData: [],
      listCategory: [],
      goodsType: '',
      room_id: null,
      goods: {},
      skuPropList: [],
      skuList: [],
      values: [],
      params: {
        categoryId: '',
        categoryType: 2,
        memberId: '',
        customerId: '',
        currentPage: 1,
        size: 10
      },
      nodata: false,
      pageParams: {},
      fastGoods: [],
      goodsLoad: 0,
      globalStyle: {},
      categoryName: '全部',
      fromType: null, // 判断页面来源
      isGetUserInfo: false,
      isGetPhoneInfo: false,
      featuresType: ''
    }
  },
  computed: {
    totalPrice() {
      let price = '0.00'
      this.cartBadge = 0
      this.listData.forEach(item => {
        let index = this.fastGoods.findIndex(listItem => {
          return listItem.goodsId === item.goodsId
        })
        if (index !== -1) {
          price = parseFloat(this.fastGoods[index].totalSellPrice * 1 + price * 1).toFixed(2)
          this.cartBadge += this.fastGoods[index].goodsNum
        }
      })
      return price
    }
  },
  onLoad() {
    // 初始化data
    Object.assign(this.$data, this.$options.data())
  },
  onShow() {
    let getAppInfo = this.$pt.getStorageSync('appInfo')
    this.globalStyle = getAppInfo.style // 全局风格样式
    /** fromType 判断页面来源 1: 从分类页面进来 2: 从链接跳转进来 */
    if (this.getCurrentPage().query.fromType) {
      this.fromType = Number(this.getCurrentPage().query.fromType)
    }
    if (this.fromType === 1) {
      this.pageParams = JSON.parse(this.getCurrentPage().query.params)
      this.params.categoryId = this.pageParams.enterpriseCategoryId
      this.params.categoryType = this.pageParams.categoryType
      this.params.memberId = this.getMemberId
      this.params.customerId = this.getCustomerId
      this.getCategoryList()
    }
    this.pageInit()
    this.getShopCartVeekray()
  },
  onPullDownRefresh() {
    // 下拉刷新
    this.$pt.pageScrollTo({
      scrollTop: 0,
      duration: 0
    })
    this.params.currentPage = 1
    this.listData = []
    this.pageInit()
    this.getShopCartVeekray()
    setTimeout(() => {
      this.$pt.stopPullDownRefresh()
    }, 500)
  },
  onReachBottom() {
    // 触底刷新
    if (!this.pullLoad.finished) {
      this.pageInit()
    }
  },
  methods: {
    resetFastGoodsPrice() {
      this.fastGoods.forEach(itemGoods => {
        if (itemGoods.skuFlag) {
          // 多规格
          let totalSellPrice = null
          itemGoods.skuList.forEach(item => {
            totalSellPrice += Math.round((item.goodsNum * item.bestPrice) * 100) / 100
          })
          itemGoods.totalSellPrice = (Math.round(totalSellPrice * 100) / 100).toFixed(2)
        } else {
          // 单规格
          let totalSellPrice = null
          totalSellPrice = (Math.round((itemGoods.goodsNum * itemGoods.bestPrice) * 100) / 100).toFixed(2)
          itemGoods.totalSellPrice = totalSellPrice
        }
      })
    },
    getShopCartVeekray() {
      this.effectiveList = []
      this.groupBuyGoodsList = []
      this.listQueryCart.memberId = this.getMemberId
      this.listQueryCart.customerId = this.getCustomerId
      this.listQueryCart.enterpriseId = this.getEnterpriseId || ''
      getShopCartVeekray(this.listQueryCart).then(response => {
        if (response.isError) return
        this.feeGoodsList = []
        this.effectiveList = response.data.effectiveList
        this.groupBuyGoodsList = response.data.groupBuyGoodsList
        this.promotionList = response.data.promotionList
        if (this.promotionList.length) {
          this.promotionList.forEach(item => {
            if (item.feeGoodsList) {
              item.feeGoodsList.forEach(itemSub => {
                this.feeGoodsList.push(itemSub)
              })
            }
          })
        }
        // 设置快速购买缓存数据，以及购物车角标展示
        this.dataFastEls(response.data)
      }).catch(() => {
      })
    },
    dataFastEls(data) {
      this.fastGoods = []
      let storeHomeGoodsList = []
      if (data.storeHomeGoodsList) {
        storeHomeGoodsList = data.storeHomeGoodsList
      }
      let tempAllList = []
      tempAllList = tempAllList.concat(this.effectiveList, this.feeGoodsList, this.groupBuyGoodsList, storeHomeGoodsList)
      if (tempAllList.length) {
        tempAllList.forEach(item => {
          // 重新获取快速购买数据
          if (item.skuId) {
            // 多规格
            let skuData = []
            let objSkuData = {
              skuId: item.skuId,
              goodsNum: item.goodsNum,
              bestPrice: item.bestPrice
            }
            skuData.push(objSkuData)
            let goodsNum = null
            skuData.forEach(item => {
              goodsNum += item.goodsNum
            })
            this.fastGoods.push({
              goodsId: item.goodsId,
              skuFlag: 1,
              skuList: skuData,
              goodsNum: goodsNum
            })
          } else {
            // 单规格
            let objFastGoods = {
              goodsId: item.goodsId,
              skuFlag: 0,
              goodsNum: item.goodsNum,
              bestPrice: item.bestPrice
            }
            this.fastGoods.push(objFastGoods)
          }
        })
      }
      let map = {}
      let dest = []
      this.fastGoods.forEach(item => {
        if (!map[item.goodsId]) {
          if (item.skuFlag) {
            dest.push({
              goodsId: item.goodsId,
              goodsNum: item.goodsNum,
              skuFlag: 1,
              skuList: item.skuList
            })
          } else {
            let objDest = {
              goodsId: item.goodsId,
              goodsNum: item.goodsNum,
              skuFlag: 0,
              bestPrice: item.bestPrice
            }
            dest.push(objDest)
          }
          map[item.goodsId] = item
        } else {
          dest.forEach(itemSub => {
            if (itemSub.goodsId === item.goodsId) {
              itemSub.goodsNum = itemSub.goodsNum + item.goodsNum
              if (item.skuFlag) {
                itemSub.skuList = itemSub.skuList.concat(item.skuList)
              }
            }
          })
        }
      })
      this.fastGoods = []
      this.fastGoods = dest
      this.resetFastGoodsPrice()
    },
    pageInit() {
      /** 从分类页进入请求相对于的分类信息  从链接进入请求所有商品信息 */
      if (this.fromType === 1) {
        this.nodata = false
        if (this.listQuery.sellPriceFlag !== '') {
          this.params.sellPriceSort = this.listQuery.sellPriceFlag
          this.params.salesNumSort = ''
        }
        if (this.listQuery.salesNumSort !== '') {
          this.params.salesNumSort = this.listQuery.salesNumSort
          this.params.sellPriceSort = ''
        }
        pageUserGoodsByMemberId(this.params).then(response => {
          if (response.isError) return
          response.data.records.forEach(element => {
            if (element.totalLimitNum) {
              element.groupLimitNum = element.totalLimitNum
            } else {
              element.groupLimitNum = element.stock
            }
            const limitNumData = element.groupLimitNum
            this.$delete(element, 'groupLimitNum')
            this.$set(element, 'groupLimitNum', limitNumData)
            this.listData.push(element)
          })
          if (this.listData.length === 0) this.nodata = true
          this.params.currentPage++
          if (this.listData.length === 0 || this.listData.length >= response.data.total) {
            this.pullLoad.finished = true
          }
        }).catch(() => {
        })
      }
    },
    // 头像昵称 授权后 立即跳出手机号授权
    authPhoneInfo() {
      this.isGetPhoneInfo = true
    },
    getCategoryList() {
      let params = {
        enterpriseCategoryId: this.pageParams.upperEnterpriseCategoryId,
        memberId: this.getMemberId
      }
      listNextCategoryByParentId(params).then(response => {
        if (response.isError) return
        this.listCategory = response.data
        // 手动添加全部分类
        this.listCategory.unshift({
          categoryName: '全部',
          enterpriseCategoryId: this.listCategory[0].parentId
        })
        this.listCategory.forEach((item, index) => {
          if (item.enterpriseCategoryId === this.params.categoryId) {
            this.categoryIndex = index
            this.categoryName = item.categoryName
          }
        })
      }).catch(() => {
      })
    },
    resetPageParams() {
      this.listData = []
      this.params.currentPage = 1
      this.pullLoad.finished = false
      this.pageInit()
    },
    setSort(value) {
      this.sortIndex = value
      switch (this.sortIndex) {
        case 0:
          this.listQuery.sellPriceFlag = this.listQuery.sellPriceFlag ? 0 : 1
          this.listQuery.salesNumSort = ''
          this.resetPageParams()
          this.isExpend = false
          break
        case 1:
          this.listQuery.salesNumSort = this.listQuery.salesNumSort ? 0 : 1
          this.listQuery.sellPriceFlag = ''
          this.resetPageParams()
          this.isExpend = false
          break
        case 2:
          this.listQuery.sellPriceFlag = ''
          this.listQuery.salesNumSort = ''
          this.isExpend = !this.isExpend
          break
        default:
          break
      }
    },
    categoryClick(item, index) {
      this.categoryIndex = index
      this.categoryName = item.categoryName
      this.isExpend = false
      console.log('点击分类', item)
      this.listData = []
      this.params.currentPage = 1
      this.pullLoad.finished = false
      this.params.categoryId = item.enterpriseCategoryId
      this.resetPageParams()
    },
    getSkuBuyClose() {
    },
    getSkuBuy(isCart, item) {
      if (this.getCustomerId) {
        if (this.shareMemberId) {
          item.shareMemberId = this.shareMemberId
        }
        const comissionFlag = this.getCurrentPage().query.comissionFlag
        this.$refs.getSkuBuy.show(item, isCart, comissionFlag, item.qty)
      } else {
        this.isGetUserInfo = false
        setTimeout(() => {
          this.isGetUserInfo = true
        }, 100)
      }
    },
    getSkuBuyFinished(params) {
      // console.log('getSkuBuyFinished 11', params.goodsNum)
      this.listData.forEach(item => {
        if (params.goodsId === item.goodsId) {
          let addCount = 0
          if (item.goodsNum) {
            addCount = item.goodsNum + params.goodsNum
          } else {
            addCount = params.goodsNum
          }
          item.goodsNum = addCount
        }
        this.cartBadgeEls(1, item, params)
      })
      this.resetFastGoodsPrice()
      this.totalCartBadge(params.goodsNum)
    },
    totalCartBadge(value) {
      let cartBadge = 0
      let badgeNum = this.$pt.getStorageSync('cartBadge') || 0
      console.log('totalCartBadge 11', badgeNum, value)
      cartBadge = Number(badgeNum) + Number(value)
      setCartBadge(cartBadge)
    },
    getProjectGoodsSku(item) {
      this.goods = this.$utils.deepClone(item)
      this.$utils.showToast({
        title: '加载中',
        icon: 'loading'
      })
      getProjectGoodsSku({
        goodsId: item.goodsId,
        customerId: this.getCustomerId,
        memberId: this.getMemberId,
        microShopFlag: item.goodsType === 30 || item.goodsType === 31 || item.goodsType === 32 ? 0 : 1
      }).then((response) => {
        if (response.isError) return
        this.$pt.hideToast()
        this.goods.skuPropList = response.data.skuPropList
        this.goods.skuList = response.data.skuList
        this.goods.values = response.data.values
        // 社区团购商品，设置featuresType为11
        this.featuresType = ''
        if (item.activityTypeLabel === '团购' || item.activityType === 11) {
          this.featuresType = 11
        }
        this.skuPropList = response.data.skuPropList
        this.skuList = response.data.skuList
        this.values = response.data.values
        setTimeout(() => {
          this.getSkuBuy(true, this.goods)
        }, 100)
      }).catch(() => {
      })
    },
    showCart(item) {
      if (this.getCustomerId) {
        if (this.getPhone) {
          // 自营商品快速购买，添加默认库存
          if (item.goodsType === 10) {
            item.stock = 1000
            const changeStock = item.stock
            this.$delete(item, 'stock')
            this.$set(item, 'stock', changeStock)
          }
          if (item.skuFlag === 1) {
            this.skuPropList = []
            this.skuList = []
            this.values = []
            this.goods = item
            this.goodsType = item.goodsType
            this.goods.bestPrice = item.bestPrice
            this.goods.images = []
            if (item.mainImage) {
              this.goods.images[0] = item.mainImage
            }
            if (item.firstImage) {
              this.goods.images[0] = item.firstImage
            }
            this.goods.isCart = true
            this.getProjectGoodsSku(item)
          } else {
            item.goodsNum = 1
            this.simpleSkuEls(item)
          }
        } else {
          this.isGetPhoneInfo = true
        }
      } else {
        this.isGetUserInfo = true
      }
    },
    addShoppingCart(value, item) {
      this.addElsShoppingCart(value, item)
    },
    addElsShoppingCart(value, item) {
      const shoppingCart = {
        customerId: this.getCustomerId,
        goodsId: item.goodsId,
        goodsNum: value,
        memberId: this.getMemberId,
        goodsType: item.goodsType,
        shoppingCartType: item.goodsType === 30 || item.goodsType === 31 || item.goodsType === 32 ? 3 : 1
      }
      addShoppingCart(shoppingCart).then((response) => {
        if (response.isError) return
        if (value === 1) this.$utils.showToast({title: '加入购物车成功'})
        this.cartBadgeEls(value, item)
        this.resetFastGoodsPrice()
        this.totalCartBadge(value)
      }).catch(() => {
      })
    },
    cartBadgeEls(value, item, params) {
      // 多规格类型
      if (params !== undefined) {
        // 多规格加、减数量缓存处理
        // console.log(params)
        if (this.fastGoods.length !== 0) {
          // 判段商品是否已经存在
          if (this.checkArrInclude(this.fastGoods, params.goodsId, 'goodsId')) {
            // 已存在goodsId商品
            this.fastGoods.forEach(itemGoods => {
              if (itemGoods.goodsId === params.goodsId) {
                // 已存在skuId商品
                if (this.checkArrInclude(itemGoods.skuList, params.skuId, 'skuId')) {
                  itemGoods.goodsNum = null
                  itemGoods.skuList.forEach(itemSku => {
                    if (itemSku.skuId === params.skuId) {
                      itemSku.goodsNum = itemSku.goodsNum + params.goodsNum
                      itemSku.bestPrice = params.bestPrice
                    }
                    itemGoods.goodsNum += itemSku.goodsNum
                  })
                } else {
                  let objSkuList = {
                    skuId: params.skuId,
                    goodsNum: params.goodsNum,
                    bestPrice: params.bestPrice
                  }
                  itemGoods.skuList.push(objSkuList)
                  itemGoods.goodsNum = null
                  itemGoods.skuList.forEach(itemSku => {
                    itemGoods.goodsNum += itemSku.goodsNum
                  })
                }
              }
            })
          } else {
            // 新增商品
            let skuData = []
            let objSkuData = {
              skuId: params.skuId,
              goodsNum: params.goodsNum,
              bestPrice: params.bestPrice
            }
            skuData.push(objSkuData)
            let goodsNum = null
            skuData.forEach(item => {
              goodsNum += item.goodsNum
            })
            this.fastGoods.push({
              goodsId: params.goodsId,
              skuFlag: 1,
              skuList: skuData,
              goodsNum: goodsNum
            })
          }
        } else {
          let skuData = []
          let objSkuData = {
            skuId: params.skuId,
            goodsNum: params.goodsNum,
            bestPrice: params.bestPrice
          }
          skuData.push(objSkuData)
          let goodsNum = null
          skuData.forEach(item => {
            goodsNum += item.goodsNum
          })
          let objFastGoods = {
            goodsId: params.goodsId,
            skuFlag: 1,
            skuList: skuData,
            goodsNum: goodsNum
          }
          this.fastGoods.push(objFastGoods)
        }
        return
      }
      // 单规格类型
      if (value === 1) {
        // 单规格加数量处理
        if (this.fastGoods.length !== 0) {
          // 判段商品是否已经存在
          if (this.checkArrInclude(this.fastGoods, item.goodsId, 'goodsId')) {
            // 已存在商品
            this.fastGoods.forEach(itemGoods => {
              if (itemGoods.goodsId === item.goodsId) {
                itemGoods.goodsNum = itemGoods.goodsNum + value
                itemGoods.bestPrice = item.bestPrice
              }
            })
          } else {
            // 新增商品
            let objData = {
              goodsId: item.goodsId,
              skuFlag: 0,
              goodsNum: item.goodsNum,
              bestPrice: item.bestPrice
            }
            this.fastGoods.push(objData)
          }
        } else {
          let objData = {
            goodsId: item.goodsId,
            skuFlag: 0,
            goodsNum: item.goodsNum,
            bestPrice: item.bestPrice
          }
          this.fastGoods.push(objData)
        }
      }
    },
    simpleSkuEls(itemOne) {
      this.goodsLoad = 0
      this.listData.forEach(item => {
        if (itemOne.goodsId === item.goodsId) {
          item.goodsNum = itemOne.goodsNum
          this.goodsLoad++
          if (this.goodsLoad === 1) {
            this.addShoppingCart(1, itemOne)
          }
        }
      })
    },
    // 判断数组是否存在某个key值
    checkArrInclude(arr, item, keyName) {
      let arrData = []
      if (arr.length !== 0) {
        arr.forEach(item => {
          arrData.push(item[keyName])
        })
      }
      if (arrData.includes(item)) {
        return true
      } else {
        return false
      }
    },
    pageTo(item) {
      this.$pt.navigateTo({url: '/pages/shop/detail/main?goodsId=' + item.goodsId + '&goodsType=' + item.goodsType})
    }
  }
}
</script>
<style lang="less" scoped>
.container {
  min-height: 100vh;
  background: white;
  .header {
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 99;
    .tabs {
      background-color: white;
      height: 50px;
      padding: 0 15px;
      justify-content: space-around;
      border-bottom: 1px solid transparent;
      border-image: linear-gradient(to bottom, transparent 50%, #eeeeee 50%) 0 0
        100%/1px 0;
      .tab-on {
        color: #333333;
        font-size: 14px;
      }
      .tab-off {
        color: #999999;
        font-size: 14px;
      }
    }
    .mask {
      height: 0;
      width: 100%;
      position: absolute;
      left: 0;
      right: 0;
      z-index: 1;
    }
    .mask-active {
      height: 100vh;
    }
    .category {
      z-index: 9;
      position: absolute;
      width: calc(100% - 30px);
      left: 0;
      top: 47px;
      padding: 0 15px;
      background-color: white;
      height: 0px;
      overflow: hidden;
      .category-list {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;
        padding-bottom: 6.5px;
        .list-item {
          width: 76px;
          padding: 0 3px;
          box-sizing: border-box;
          height: 32px;
          text-align: center;
          border-radius: 16px;
          font-size: 12px;
          line-height: 32px;
          background-color: #f5f5f5;
          margin-right: calc((100% - 304px) / 3);
          margin-bottom: 10px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          word-break: break-word;
          &:nth-child(4n + 4) {
            margin-right: unset;
          }
        }
        .item-active {
          background-color: #ffe200;
        }
      }
    }
    .expend {
      height: auto;
    }
  }
  .img-item-box {
    .sell-out {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
      color: rgba(254, 254, 254, 0.7);
      background: rgba(0, 0, 0, 0.5);
      font-size: 12px;
      .del-layer {
        border-radius: 50%;
        border: 1px solid white;
        justify-content: center;
        width: 90px;
        height: 90px;
      }
      .delete-css {
        position: absolute;
        transform: rotate(-45deg);
        background: rgba(255, 255, 255, 0.58);
        height: 20px;
        line-height: 20px;
        font-size: 12px;
        width: 100%;
        text-align: center;
        color: #000;
      }
    }
  }
  .goods {
    padding-top: 51px;
    padding-bottom: 49px;
    .goods-list {
      padding: 15px 15px 0;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: wrap;
      width: calc(100% - 30px);
      .goods-wrap {
        width: 167px;
        height: 251px;
        background-color: white;
        border-radius: 8px;
        box-shadow: 0 0 6px 1px rgba(93, 93, 93, 0.2);
        margin-right: calc(100% - 334px);
        margin-bottom: 15px;
        overflow: hidden;
        &:nth-child(2n + 2) {
          margin-right: unset;
        }
        .goods-content {
          .price-row {
            .price-wrap {
              color: #ff593e;
              display: flex;
              justify-content: flex-start;
              align-items: center;
              line-height: 1;
            }
          }
          .price-short {
            max-width: 46px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            word-break: break-word;
          }
        }
      }
    }
  }
  .foot-cart {
    position: fixed;
    height: 49px;
    width: 100%;
    background-color: white;
    left: 0;
    bottom: 0;
    box-shadow: 0 0 5px rgba(155, 155, 155, 0.15);
    .content {
      padding-left: 15px;
      padding-right: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .color-price {
        color: #ff593e;
      }
    }
    .go-cart {
      font-size: 16px;
      background-color: #ffe200;
      height: 49px;
      line-height: 49px;
      width: 133.5px;
      text-align: center;
    }
  }
}
.nodata-img {
  margin-left: 30px;
  margin-top: 80px;
}
</style>
